<script setup lang="ts">
import { ref, reactive, onBeforeMount } from 'vue'
import type { FormInstance } from 'element-plus'
import { getDictionaryListApi, getSuccessStatus } from '@/api/dictionary'

const props = defineProps<{
	editNode: { [key: string]: any }
}>()

const state = reactive({
	actionList: [] as string[],
})

const actionAuthList = ref<DictionaryType[]>([])
const formInstance = ref<FormInstance | null>(null)
const formLayout = {
	style: 'margin: 0 10px',
	labelWidth: 'auto',
	labelPosition: 'left',
}

const rules = {
	xxx: [{ required: true, message: '请输入xxx！', trigger: 'change' }],
}

onBeforeMount(() => {
	getRequestAuthList()
})

async function getRequestAuthList() {
	const res = await getDictionaryListApi({ categoryName: 'requestAuth' })
	if (res.code == getSuccessStatus())
		actionAuthList.value = res.data.map((v: any) => {
			v.label = v.name
			return v
		})
}

function handleGiveAllRequestAuth(){
  state.actionList=actionAuthList.value.map(v=>v.value)
}

function init() {
	const { actions } = props.editNode
	if (actions) state.actionList = actions.split(',')
	else state.actionList = []
}

function formCommit() {
	return JSON.parse(JSON.stringify(state.actionList.join(',')))
}

defineExpose({
	init,
	formCommit,
})
</script>

<template>
	<el-form :model="state" :rules="rules" v-bind="formLayout" ref="formInstance">
		<el-row :gutter="24">
			<el-col :span="24">
				<el-form-item prop="actionList" label="接口权限">
					<my-select :options="actionAuthList" v-model="state.actionList"  style="width: 85%;margin-right: 6px;" multiple filterable placeholder="请选择页面内访问的接口" clearable ></my-select>
					 <el-button @click="handleGiveAllRequestAuth">全选</el-button>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>
